<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title='联系我们', content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 扶贫助农电商平台</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .hero-section {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 80px 0;
        }
        .contact-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            margin-bottom: 30px;
        }
        .contact-card:hover {
            transform: translateY(-5px);
        }
        .contact-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        .contact-form {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 40px;
        }
        .map-container {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <!-- 页面头部 -->
        <section class="hero-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto text-center">
                        <h1 class="display-4 fw-bold mb-4">联系我们</h1>
                        <p class="lead">有任何问题或建议，我们都乐意倾听。让我们携手助力扶贫事业，共同创造美好未来。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系方式 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 mb-4">
                        <div class="contact-card text-center">
                            <div class="contact-icon">
                                <i class="fas fa-phone fa-2x text-white"></i>
                            </div>
                            <h4>电话咨询</h4>
                            <p class="text-muted mb-3">全国服务热线，7x24小时为您服务</p>
                            <h5 class="text-success" th:text="${phone}">400-123-4567</h5>
                            <small class="text-muted">工作时间：9:00-18:00</small>
                        </div>
                    </div>
                    
                    <div class="col-lg-4 mb-4">
                        <div class="contact-card text-center">
                            <div class="contact-icon">
                                <i class="fas fa-envelope fa-2x text-white"></i>
                            </div>
                            <h4>邮箱联系</h4>
                            <p class="text-muted mb-3">发送邮件，我们会及时回复</p>
                            <h5 class="text-success" th:text="${email}">contact@nongchanpin.com</h5>
                            <small class="text-muted">24小时内回复</small>
                        </div>
                    </div>
                    
                    <div class="col-lg-4 mb-4">
                        <div class="contact-card text-center">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt fa-2x text-white"></i>
                            </div>
                            <h4>公司地址</h4>
                            <p class="text-muted mb-3">欢迎您到访我们的办公室</p>
                            <h6 class="text-success" th:text="${address}">北京市朝阳区扶贫大厦8楼</h6>
                            <small class="text-muted">工作日开放参观</small>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系表单和地图 -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="row">
                    <!-- 联系表单 -->
                    <div class="col-lg-6 mb-4">
                        <div class="contact-form">
                            <h3 class="mb-4"><i class="fas fa-comment-alt text-success"></i> 在线留言</h3>
                            <form>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">姓名 *</label>
                                        <input type="text" class="form-control" id="name" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label">联系电话 *</label>
                                        <input type="tel" class="form-control" id="phone" required>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">邮箱</label>
                                        <input type="email" class="form-control" id="email">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="subject" class="form-label">主题</label>
                                        <select class="form-select" id="subject">
                                            <option value="">请选择主题</option>
                                            <option value="product">产品咨询</option>
                                            <option value="cooperation">合作洽谈</option>
                                            <option value="complaint">投诉建议</option>
                                            <option value="other">其他</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="message" class="form-label">留言内容 *</label>
                                    <textarea class="form-control" id="message" rows="5" required placeholder="请详细描述您的问题或建议..."></textarea>
                                </div>
                                
                                <button type="submit" class="btn btn-success btn-lg w-100">
                                    <i class="fas fa-paper-plane"></i> 发送留言
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <!-- 地图和其他信息 -->
                    <div class="col-lg-6">
                        <!-- 地图占位 -->
                        <div class="map-container mb-4">
                            <div class="bg-secondary text-white text-center py-5" style="height: 300px; display: flex; align-items: center; justify-content: center;">
                                <div>
                                    <i class="fas fa-map fa-3x mb-3"></i>
                                    <h5>地图位置</h5>
                                    <p>北京市朝阳区扶贫大厦8楼</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 工作时间 -->
                        <div class="contact-card">
                            <h4><i class="fas fa-clock text-primary"></i> 工作时间</h4>
                            <div class="row">
                                <div class="col-6">
                                    <p><strong>周一至周五</strong></p>
                                    <p>9:00 - 18:00</p>
                                </div>
                                <div class="col-6">
                                    <p><strong>周末</strong></p>
                                    <p>10:00 - 16:00</p>
                                </div>
                            </div>
                            <hr>
                            <p class="mb-0"><i class="fas fa-info-circle text-info"></i> 节假日可能会有所调整，请提前电话咨询</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 加入我们 -->
        <section class="py-5">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold">加入我们的扶贫事业</h2>
                    <p class="lead text-muted">多种方式参与扶贫助农，让爱心传递到每一个角落</p>
                </div>
                
                <div class="row">
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="contact-card text-center">
                            <div class="contact-icon" style="background: linear-gradient(135deg, #007bff, #6610f2);">
                                <i class="fas fa-shopping-cart fa-2x text-white"></i>
                            </div>
                            <h5>购买农产品</h5>
                            <p class="text-muted">每一次购买都是对农户的直接帮助</p>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="contact-card text-center">
                            <div class="contact-icon" style="background: linear-gradient(135deg, #fd7e14, #e83e8c);">
                                <i class="fas fa-handshake fa-2x text-white"></i>
                            </div>
                            <h5>合作伙伴</h5>
                            <p class="text-muted">成为我们的合作伙伴，共同推进扶贫事业</p>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="contact-card text-center">
                            <div class="contact-icon" style="background: linear-gradient(135deg, #20c997, #17a2b8);">
                                <i class="fas fa-share-alt fa-2x text-white"></i>
                            </div>
                            <h5>分享推广</h5>
                            <p class="text-muted">分享给朋友，让更多人了解我们的使命</p>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="contact-card text-center">
                            <div class="contact-icon" style="background: linear-gradient(135deg, #ffc107, #fd7e14);">
                                <i class="fas fa-heart fa-2x text-white"></i>
                            </div>
                            <h5>爱心捐赠</h5>
                            <p class="text-muted">为贫困地区教育和基础设施建设贡献力量</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- jQuery -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 